/**
 * 报销设置
 */
import React from 'react';
import { connect } from 'react-redux';
import { getQueryUrlParam, messages } from 'share/common';
import { Tabs } from 'antd';
import ExpensePrint from './expense-print';
import ExpensePayType from './expense-pay-type';
import 'styles/request-and-expense-settings/request-and-expense-settings.scss';
import ConfigurationDetailComp from 'containers/setting/configuration-center/configuration-detail/index';
import { setExpenseSettingTab } from 'actions/cache';

const TabPane = Tabs.TabPane;

@connect(mapStateToProps)
class ExpenseSetting extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tabKey: 'expense-control'
    };
  }

  componentDidMount() {
    const isShowJumpControl = getQueryUrlParam('fromUnboxSetting') === 'Y';
    const { expenseSettingTab = 'expense-control' } = this.props;
    this.setState({ tabKey: isShowJumpControl ? 'expense-print' : expenseSettingTab  });
  }

  handleTabChange = (tabKey) => {
    this.setState({ tabKey });
    this.props.dispatch(setExpenseSettingTab(tabKey));
  };

  renderTabs = () => {
    let tabs = [{
      key: 'expense-control',
      name: messages('expense-7.key90')/*报销单提交管控*/,
    }, {
      key: 'expense-print',
      name: messages('expense-7.key83')/*报销单打印设置*/,
    }, {
      key: 'expense-pay-type',
      name: messages('expense-7.key40')/*付款类型*/,
    }];
    return (
      tabs.map(tab => <TabPane tab={tab.name} key={tab.key}/>)
    );
  };

  renderContent = () => {
    const { tabKey } = this.state;
    const key2Content = {
      'expense-control': <ConfigurationDetailComp params={{ id: '1118150569742467074' }}/>,
      'expense-print': <ExpensePrint/>,
      'expense-pay-type': <ExpensePayType/>
    };
    return key2Content[tabKey];
  };

  render() {
    const { tabKey } = this.state;
    return (
      <div className="expense-setting full-height-page">
        <Tabs activeKey={tabKey} onChange={this.handleTabChange}>
          {this.renderTabs()}
        </Tabs>
        {this.renderContent()}
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    expenseSettingTab: state.cache.expenseSettingTab
  };
}

export default ExpenseSetting;
